<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['report:report:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['report:report:edit']"
        >修改</el-button>
      </el-col>
<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>
    <el-col :span="12">
      <el-card>
        <el-table v-loading="loading" :data="reportList"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="报表时间(月)" align="center" prop="rtime" />
          <el-table-column label="交易金额" align="center" prop="amount" />
          <el-table-column label="充电量" align="center" prop="chargequantity" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['report:report:edit']"
              >修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <!-- 添加或修改月度报表管理对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="交易金额" >
              <el-input v-model="form.amount" placeholder="请输入交易金额" />
            </el-form-item>
            <el-form-item label="充电量" >
              <el-input v-model="form.chargequantity" placeholder="请输入充电量" />
            </el-form-item>
            <el-form-item label="时间(月)" >
              <el-input v-model="form.rtime" placeholder="请输入报表时间" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-card>
    </el-col>
   <el-col :span="12">
     <el-card >
       <div id="data" style="width:auto;height: 579.6px"></div>
     </el-card>
   </el-col>



  </div>
</template>

<script>
    import { listReport , getReport , addReport, updateReport , getMonthlyReport } from "@/api/report/report";

    export default {
        name: "Report",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 月度报表管理表格数据
                reportList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    Amount:null,
                    Chargequantity:null,
                    rtime: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {

                }
            };
        },
        mounted(){
            this.showStatus()
        },
        created() {
            this.getList()
        },

        methods: {
            //统计图
        showStatus(){
          let showStatusEcharts= this.$echarts.init(document.getElementById("data"))
            getMonthlyReport().then(response=>{
                let Amounts=[];
                let Chargequantities = [];
                let rtimes = [];
                let array = response.data;
                for (let i in array){
                    Amounts.push(array[i].amount);
                    Chargequantities.push(array[i].chargequantity);
                    rtimes.push(array[i].rtime);
                }
                showStatusEcharts.setOption({
                    title: {
                        text: '月度报表'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: rtimes
                    },
                    series: [
                        {
                            name: '总收入',
                            type: 'bar',
                            data: Amounts,
                            itemStyle: {
                                normal: {
                                    color: '#87ceeb' // 定义系列 1 的颜色
                                }
                            }

                        },
                        {
                            name: '总充电量',
                            type: 'bar',
                            data: Chargequantities,
                            itemStyle: {
                                normal: {
                                    color: '#90EE90' // 定义系列 2 的颜色
                                }
                            }

                        }
                    ]
                })
            })
        },
            getList() {
                this.loading = true;
                listReport(this.queryParams).then(response => {
                    this.reportList = response.rows;
                    console.log( this.reportList )
                    this.total = response.total;
                    this.loading = false;
                });},
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // // 表单重置
            reset() {
                this.form = {
                    mrid: null,
                    Amount: null,
                    Chargequantity: null,
                    rtime: null
                };
                this.resetForm("form");
            },
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.fid)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加月度报表管理";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const mrid = row.mrid || this.ids
                getReport(mrid).then(response => {
                    this.form = response.data;
                    console.log(this.form);
                    this.open = true;
                    this.title = "修改月度报表管理";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.mrid != null) {
                            updateReport(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addReport(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
        }
    };
</script>

